<template>

  <div class="col-box">
    <el-steps :active="2" align-center>
      <el-step title="步骤1" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤2" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤3" description="这是一段很长很长很长的描述性文字"></el-step>
      <el-step title="步骤4" description="这是一段很长很长很长的描述性文字"></el-step>
    </el-steps>
  </div>
</template>

<script>
  export default {
    name: "FlowPath",
    data() {
      return {
        isBc: -1,
        dateVal: [{
          nodeName: "新增续保询价单",
          nodeId: "1",
          type: "draft",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "保司报价",
          nodeId: "2",
          type: "node1",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "新增续保询价单",
          nodeId: "3",
          type: "node2",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "保司报价",
          nodeId: "4",
          type: "node3",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "保司报价审批",
          nodeId: "5",
          type: "node2",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "上传续保保单",
          nodeId: "4",
          type: "node3",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "付款",
          nodeId: "5",
          type: "node4",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }, {
          nodeName: "续保保单审核",
          nodeId: "6",
          type: "node3",
          date: "2022-12-03 12:00:00",
          approver: "王五（开始）"
        }],

      }
    },

    methods: {

    }
  }
</script>

<style scoped>
  .col-box {
    display: flex;
    align-items: center;

    .col-but {
      margin-right: 12px;
    }

    .span-item {
      color: #606266;
      border-radius: 4px;
      margin: 0 6px;
      /* background-color: aqua; */
      padding: 4px 8px;
      cursor: pointer;
    }

    .action-span-item {
      background-color: rgb(217, 236, 255);
      color: #1890ff;
    }
  }
</style>
